<?php

$form = $this->beginWidget ( 'CActiveForm', array (
		'id' => 'episode-form',
		'enableAjaxValidation' => false,
		'htmlOptions' => array (
				'class' => 'form-horizontal',
				'novalidate' => 'novalidate' 
		) 
) );
?>

	<div class="widget widget-table">
		<div class="widget-header">					
			<h3>
				<i class="icon-th-list"></i>
				<?php echo 'Episode List - '.CHtml::link('Server:'.$server->name.'',array('/server/admin','fid'=>$film->id)).' - '.CHtml::link('Film:'.$film->title.'',array('/film/update','id'=>$film->id)); ?>			
			</h3>
		</div> <!-- /widget-header -->
		<div class="widget-toolbar clearfix">
			<div class="pull-left">
				<?php echo CHtml::link('<i class="icon-step-backward"></i> Back',array('/episode/admin','eid'=>$server->id),array('class'=>'btn btn-primary')); ?>
			</div>
			<!-- /.pull-left -->
	
			<div class="pull-right">
				<span>Episode from </span><input type="text" style="width: 40px;margin-right: 15px" name="from"  id="from" value="1"/>
				<span>to </span><input type="text" style="width: 40px;margin-right: 15px" name="to"  id="to" value="1"/>
				<a id="btn_add" class="btn btn-primary"><i class="icon-plus"></i> Add Records</a>
			</div>
			<!-- /.pull-left -->
		</div>
		<div class="widget-content">
			<table id="table1" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>Name</th>
						<th>Link</th>
						<th>Srt</th>
						<th>Remove</th>
					</tr>
				</thead>
				<tbody>
					<tr id="row">
						<td><span>1</span></td>
						<td><input style="width: 80px;" type="text" class="name" name="[1]name" value="Tập 1"/></td>
						<td><input style="width: 80%;" type="text" class="link" name="[1]link" value=""/></td>
						<td><input style="width: 80%;" type="text" class="srt" name="[1]srt" value=""/></td>
						<td><a for="row" class="btn btn-danger hiden">Remove</a></td>
					</tr>
				</tbody>
			</table>
			<div style="padding: 10px 0;border-top: 1px solid #cccccc;text-align: center;">
			<?php echo CHtml::submitButton('Save',array('class'=>'btn btn-primary btn-large')); ?>
			<?php echo CHtml::link('Cancel',array('/episode/admin','eid'=>$server->id),array('class'=>'btn btn-large')); ?>
			</div>
			<input type="hidden" value="1" name="count" id="count"/>
			<input type="hidden" value="<?php echo $server->id;?>" name="eid"/>
		</div>
		<!-- /widget-content -->
	</div>
<?php $this->endWidget(); ?>
<script type="text/javascript">
	var total=1;
	$('#row').addClass('hiden');
	$('.pull-right input').keyup(function(){
		var val=parseInt($(this).val(),10);
		if(isNaN(val)){
			val='0';
		}
		if(val>500){
			val=500;
		}
		if(val<0){
			val=0;
		}
		$(this).val(val);
	});
	$('#btn_add').click(function(){
		addRow();
	});
	function addRow(){
		
		var from=parseInt($('#from').val());
		var to=parseInt($('#to').val());
		if(from>to){
			from=1;
			to=1;
		}
		if(total<from){
			total=from;
		}
		/*$("table#table1 tbody tr").each(function(index){
			$(this).attr('id','row'+(index+1));
			$(this).find('.name').val('Tập '+(index+1));
			$(this).find('span').text(index+1);
			$(this).find('.name').attr('name','['+(index+1)+']name');
			$(this).find('.link').attr('name','['+(index+1)+']link');
			$(this).find('.name').attr('id','['+(index+1)+']name');
			$(this).find('.link').attr('id','['+(index+1)+']link');
			$(this).find('.btn-danger').attr('for','row'+(index+1));
		});
		*/
		for(var i=from;i<=to;i++){
			var o=$('#row').clone();
			$(o).removeClass('hiden');
			$(o).attr('id','row'+total);
			$("table#table1 tr").last().after(o);
			$('#row'+total+' span').text(total);
			$('#row'+total+' .name').attr('value','Tập '+total);
			$('#row'+total+' .name').attr('name','name[]');
			$('#row'+total+' .link').attr('name','link[]');
			$('#row'+total+' .srt').attr('srt','srt[]');
			$('#row'+total+' .name').attr('id','['+total+']name');
			$('#row'+total+' .link').attr('id','['+total+']link');
			$('#row'+total+' .srt').attr('id','['+total+']srt');
			$('#row'+total+' .btn-danger').attr('for','row'+total);
			$('#row'+total+' .btn-danger').removeClass('hiden');
			$('#count').val(total);
			$('.btn-danger').click(function(){
				$('#'+$(this).attr('for')).remove();
			});
			total++;
		}
	}
</script>